<template>
    <div class="warpper">
        <title-bar :title="titleText"/>
        <div class="button">
            <text @click="dynamicChangeComponent" class="button-text">{{buttonText}}</text>
        </div>
        <component :is="componentName"></component>
    </div>
</template>
<script>
import TitleBar from "./TitleBar";
import componentA from "./test/ComponentA";
import componentB from "./test/ComponentB";
export default {
  components: {
    TitleBar,
    componentA,
    componentB
  },
  data: {
    componentName: "componentA",
    titleText: "动态组件",
    buttonText: "切换按钮"
  },
  methods: {
    dynamicChangeComponent: function() {
      let self = this;
      self.componentName = "componentB";
    }
  }
};
</script>
<style scoped>
.warpper {
  align-items: center;
}
</style>
<style scoped src="./test.css"/>


